<template>
  <hips-view sub-header-fixed>
    <hips-nav-bar
      slot="header"
      title="Checkbox 复选框"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <hips-tabs
      slot="sub-header"
      v-model="active"
    >
      <hips-tab title="标准用法" />
      <hips-tab title="Dsx用法" />
    </hips-tabs>

    <div v-show="!active">
      <demo-block title="复选框">
        <demo-block title="基本用法">
          <div class="value-tag">
            checked:{{ data0 }}
          </div>
          <hips-checkbox v-model="data0">
            Checkbox
          </hips-checkbox>
        </demo-block>

        <demo-block title="禁用">
          <hips-checkbox
            v-model="data1"
            disabled
            label="禁用的 Checkbox"
          />
        </demo-block>

        <demo-block title="改变model的值">
          <div class="value-tag">
            checked:{{ checked }}
          </div>
          <hips-checkbox
            v-model="checked"
            :option="option"
          />
        </demo-block>

        <demo-block title="复选框右侧">
          <hips-checkbox
            v-model="checked"
            :option="option"
            icon-position="right"
          />
        </demo-block>
      </demo-block>

      <demo-block title="复选框组">
        <demo-block title="单选">
          <div class="value-tag">
            checked:{{ data2 }}
          </div>
          <hips-checkbox-group
            v-model="data2"
            :options="[
              {
                label: 'yes',
                value: 'yes',
              },
              {
                label: 'no',
                value: 'no',
              },
            ]"
            max="1"
          />
        </demo-block>

        <demo-block title="多选">
          <div class="value-tag">
            checked:{{ data3 }}
          </div>
          <hips-checkbox-group v-model="data3">
            <hips-checkbox option="1">
              <i>Checkbox 1</i>
            </hips-checkbox>
            <hips-checkbox option="2">
              <i>Checkbox 2</i>
            </hips-checkbox>
            <hips-checkbox :option="{ value: '3', disabled: true }">
              <i>Disabled Checkbox</i>
            </hips-checkbox>
            <hips-checkbox :option="{ value: '4', disabled: true }">
              <i>Disabled & Checked Checkbox</i>
            </hips-checkbox>
          </hips-checkbox-group>
        </demo-block>

        <demo-block title="多选">
          <div class="value-tag">
            checked:{{ checkList }}
          </div>
          <hips-checkbox-group
            v-model="checkList"
            :options="options"
            :horizontal="true"
          />
        </demo-block>

        <demo-block title="自定义列数">
          <hips-checkbox-group
            v-model="colCheckList"
            :options="colOptions"
            :col-num="3"
          />
        </demo-block>
      </demo-block>
    </div>
    <div v-show="active">
      <demo-block title="复选框">
        <demo-block title="基本用法">
          <div class="value-tag">
            checked:{{
              dsx.records
                .at(0)
                .getField('data0')
                .getValue()
            }}
          </div>
          <hips-checkbox :d-field="dsx.records.at(0).getField('data0')">
            Checkbox
          </hips-checkbox>
        </demo-block>

        <demo-block title="禁用">
          <hips-checkbox :d-field="dsx.records.at(0).getField('data1')" />
        </demo-block>

        <demo-block title="改变model的值">
          <div class="value-tag">
            checked:{{
              dsx.records
                .at(0)
                .getField('checked')
                .getValue()
            }}
          </div>
          <hips-checkbox :d-field="dsx.records.at(0).getField('checked')" />
        </demo-block>

        <demo-block title="复选框右侧">
          <hips-checkbox :d-field="dsx.records.at(0).getField('checked1')" />
        </demo-block>
      </demo-block>

      <demo-block title="复选框组">
        <demo-block title="单选">
          <div class="value-tag">
            checked:{{
              dsx.records
                .at(0)
                .getField('data2')
                .getValue()
            }}
          </div>
          <hips-checkbox-group :d-field="dsx.records.at(0).getField('data2')" />
        </demo-block>

        <demo-block title="多选">
          <div class="value-tag">
            checked:{{
              dsx.records
                .at(0)
                .getField('checkList')
                .getValue()
            }}
          </div>
          <hips-checkbox-group
            :d-field="dsx.records.at(0).getField('checkList')"
          />
        </demo-block>

        <demo-block title="自定义列数">
          <hips-checkbox-group
            :d-field="dsx.records.at(0).getField('colCheckList')"
          />
        </demo-block>
      </demo-block>
    </div>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Checkbox, CheckboxGroup, Tabs, Tab } from '@hips/vue-ui';
import Dsx from '@hips/plugin-dataset-vuex';

export default {
  components: {
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  mixins: [ BasicView ],

  data() {
    return {
      active: 0,
      data0: false,
      data1: true,
      data3: [ '1', '4' ],
      data2: [],
      checked: false,
      option: {
        label: 'Option Checkbox',
        value: 'optionValue',
        disabled: false,
      },
      checkList: [ '1', '4' ],
      options: [
        '1',
        '2',
        {
          label: '3',
          value: '3',
          disabled: true,
        },
        {
          label: '4',
          value: '4',
          disabled: true,
        },
      ],
      colCheckList: [],
      colOptions: [
'1', '2', '3', '4', '5', '6', '7', '8',
],
      dsx: new Dsx({
        moduleName: 'dsx-checkbox',
        autoCreate: true,
        fields: [
          {
            name: 'data0',
            defaultValue: false,
          },
          {
            name: 'data1',
            disabled: true,
            defaultValue: true,
            label: '禁用的 Checkbox',
          },
          {
            name: 'checked',
            defaultValue: false,
            option: {
              label: 'Option Checkbox',
              value: 'optionValue',
              disabled: false,
            },
          },
          {
            name: 'checked1',
            defaultValue: false,
            option: {
              label: 'Option Checkbox',
              value: 'optionValue',
              disabled: false,
            },
            iconPosition: 'right',
          },
          {
            name: 'data2',
            defaultValue: [],
            options: [
              {
                label: 'yes',
                value: 'yes',
              },
              {
                label: 'no',
                value: 'no',
              },
            ],
            max: 1,
          },
          {
            name: 'checkList',
            defaultValue: [ '1', '4' ],
            options: [
              '1',
              '2',
              {
                label: '3',
                value: '3',
                disabled: true,
              },
              {
                label: '4',
                value: '4',
                disabled: true,
              },
            ],
            horizontal: true,
          },
          {
            name: 'colCheckList',
            defaultValue: [],
            options: [
'1', '2', '3', '4', '5', '6', '7', '8',
],
            colNum: 3,
          },
        ],
      }),
    };
  },
  methods: {},
};
</script>

<style lang="stylus">
.value-tag {
  padding:10px;
}
</style>
